<template>
  <div class="table-page">
    <Gi-table
      row-key="id"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :row-selection="{ type: 'checkbox', showCheckedAll: true }"
      v-model:selectedKeys="selectedKeys"
      v-model:columns="columns"
      :pagination="pagination"
      @refresh="getTableData"
    >
      <template #custom-extra>
        <a-button type="primary" size="small" @click="onAddOrEdit(false)">
          <template #icon><icon-plus /></template>
          <span>新增角色</span>
        </a-button>
        <a-button v-if="selectedKeys.length > 0" type="primary" size="small" @click="onDeleteBatch(false)">
          <template #icon><icon-delete /></template>
          <span>批量删除</span>
        </a-button>
      </template>
      <template #status="{ record }">
        <a-switch v-model="record.status" size="medium">
          <template #checked>有效</template>
          <template #unchecked>无效</template>
        </a-switch>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-button type="text" @click="onAddOrEdit(record)" size="small"> 编辑 </a-button>
          <a-button type="text" size="small" @click="onDeleteBatch(record.id)"> 删除 </a-button>
          <a-button type="text" size="small" @click="allocation(record.id, record.name)"> 权限分配 </a-button>
        </a-space>
      </template>
    </Gi-table>
    <EditRoleModal ref="EditRoleModalRef" @getTableData="getTableData"></EditRoleModal>
  </div>
</template>

<script setup>
import { usePagination } from '@/hooks'
import { roleList, roleDelete } from '@/apis'
import { Message, Modal } from '@arco-design/web-vue'
import EditRoleModal from './EditRoleModal.vue'

defineOptions({ name: 'role' })

const router = useRouter()
const columns = [
  {
    title: '角色名称',
    dataIndex: 'name'
  },
  {
    title: '角色分组',
    dataIndex: 'guard_name'
  },
  {
    title: '创建时间',
    dataIndex: 'created_at'
  },
  {
    title: '描述',
    dataIndex: 'description',
    render: ({ record }) => {
      return record.description || '--'
    }
  },
  {
    title: '操作',
    slotName: 'action'
  }
]

const EditRoleModalRef = ref()

const loading = ref(false)
const listParams = {
  page: 1,
  pageSize: 15
}
const tableData = ref([])
const selectedKeys = ref([])

const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: 15 })

const onAddOrEdit = (item) => {
  EditRoleModalRef.value?.addOrEdit(item)
}

const allocation = (id, name) => {
  router.push({
    name: 'pAssignment',
    query: { id, name }
  })
}

const getTableData = async () => {
  loading.value = true
  listParams.page = pagination.current
  listParams.pageSize = pagination.pageSize
  const res = await roleList(listParams)
  tableData.value = res.data.data
  setTotal(res.data.total)
  loading.value = false
}
getTableData()

// 删除用户
const onDeleteBatch = (id) => {
  Modal.warning({
    title: '提示',
    content: '是否确认删除？',
    hideCancel: false,
    onOk: () => {
      loading.value = true
      const ids = id ? [id] : selectedKeys.value
      const apiArr = ids.map((item) => {
        return roleDelete({ id: item })
      })
      Promise.all(apiArr)
        .then(() => {
          selectedKeys.value = []
          Message.success('删除成功')
          getTableData()
        })
        .finally(() => {
          loading.value = false
        })
    }
  })
}
</script>
